/*指定编码集：utf-8  通配选择器页面元素统一
                    文本设定16px，字体家族，微软雅黑
					超链接，列表样式去掉，盒子模型，
					元素默认存在外边框
给父元素添加效果：宽高500*200  边框1px
给所有子元素添加效果：宽高100*100 背景色，字体大小自定
                    字体垂直居中，所有子元素左浮动，
					每个子元素必需颜色不同
*/
@charset "utf8";
/* 指定编码集：utf-8  通配选择器页面元素统一
                    文本设定16px，字体家族，微软雅黑
					超链接，列表样式去掉，盒子模型，
					元素默认存在外边框 */
* {
    font: 16px "微软雅黑";
    
    list-style-type: none;
	
    text-decoration: none;
    margin: 0;
	padding: 0;
}

/* 给父元素添加效果：宽高500*200  边框1px */
#father{
    width: 499px;
	
	/*塌陷的解决方案一：加高    经验*/
    height: 200px;
	
	/*塌陷的解决方案二：加溢出，子浮动元素算溢出*/
	overflow:hidden;
	
	
    border: 10px solid red;
}

/* 给所有子元素添加效果：宽高100*100 背景色，字体大小自定
                    字体垂直居中，所有子元素左浮动，
					每个子元素必需颜色不同 */
/*网页，选择器权值问题：如果不够，给一个选择器添加效果
  协同给几个元素添加效果
  群组选择器，抓取不同元素，统一添加效果
  */
div.d1,div.d2,div.d3,div.d4,div.d5{
	width: 100px;
    height: 100px;
	background: #ffff00;
	/*浮动产生一定问题*/
	float: left;
	font-size: 2em;/*文字大小*/
	text-align: center;/*文本水平对齐方式：文字居中*/
	line-height:100px ;/*行与行之间的垂直距离*/
 }
 div#father div.d1{
	 background: #ffff00;
	 /*浮动卡住：第二步，d1高度*/
	 
 }
 div#father div.d2{
 	 background: #55ffff; 
	 height: 101px;
 }
 div#father div.d3{
 	 background: #00aa00; 
 }
 div#father div.d4{
 	 background: #ff00ff;
 }
 div#father div.d5{
 	 background: #0055ff;
	 /*清除浮动，解决浮动卡住问题，纵向还是横向*/
	 clear: both;
 }
 /*给所有子元素添加效果*/
